<template>
	<view class="repari_record">
		<view class="record_item">
			<view class="header">
				<view class="num flex">{{ index + 1 }}</view>
				<view class="name">
					<block v-for="(item, it) in form.checkTypeName" :key="it">
						<uni-icons color="#666" size="16" type="arrowright" v-if="it > 0"></uni-icons>
						{{ item }}
					</block>
					<text v-if="form.checkTypeName && form.checkTypeName.length && form.floorStandNames">({{ form.floorStandNames.replaceAll(',','>') }})</text>
				</view>
				<view class="handle">
					<!-- <view class="save">
						保存
					</view> -->
					<view v-if="!isEdit && orderStatus !== 4 && msg.userId == userinfo.user_id && updateStatus"
						class="handle_item">
						<view @click="handleEdit" class="editBtn">
							<image src="/static/images/edit2.png" mode=""></image>
						</view>
						<view @click="handleDel" class="delBtn">
							<image src="/static/images/del.png" mode=""></image>
						</view>
					</view>
					<view v-if="isEdit" class="saveBtn" @click="handleUpdate">
						<image src="/static/images/save.png" mode=""></image>
						<text>保存</text>
					</view>
				</view>
			</view>

			<view class="content" :style="{ border: isLast ? 'none' : '' }">
				<view class="type">{{ msg.disposeType === 1 ? '设备检修' : '部件更换' }}</view>
				<view class="imgBox">
					<image-drag-sort :max="9" @changeList="changeImg" :list="disposeImgUrl"
						:disabled="disabled"></image-drag-sort>
				</view>
				<view class="des">
					<view>描述:</view>
					<view :style="{ border: isEdit ? '1rpx solid #e9e9e9' : '', padding: isEdit ? '20rpx' : '0rpx' }"
						v-if="isEdit">
						<textarea type="textarea" v-model="form.disposeDesc" placeholder="请输入备注内容"
							placeholder-class="textare" :disabled="disabled"
							style="font-size: 28rpx;height: 200rpx;width: 100%;" maxlength="300" />
					</view>
					<view style="margin-bottom: 20rpx;" v-else>{{ form.disposeDesc }}</view>
				</view>
				<view class="length" v-if="isEdit">{{ form.disposeDesc.length + '/300' }}</view>
				<view class="member">
					<image src="/static/images/maintain/add.png" mode=""></image>
					<text style="color: #333;margin-right: 8rpx;">{{ msg.malfunctionRecordVO[0].userName }}</text>
					{{ msg.malfunctionRecordVO[0].recordLog }}
				</view>
				<view class="time">{{ msg.malfunctionRecordVO[0].updateTime }}</view>
			</view>
		</view>
	</view>
</template>

<script>
import ImageDragSort from '@/components/image-drag-sort/index.vue';
import { editCHeckRecord } from '@/apis/workOrder.js';
import { update, del, setRecord, fetchDetail } from '@/apis/repair.js';
import { rescueDetail } from '@/apis/elevator.js';
import { mapState, mapActions } from 'vuex';
export default {
	components: {
		ImageDragSort
	},
	props: {
		// 对象数组
		msg: {
			type: Object
		},
		// 索引值
		index: {
			type: Number
		},
		// 我自己是否还未签退
		isPlanStatus: {
			type: Boolean,
			default: false
		},
		// 是否最后一个item
		isLast: {
			type: Boolean
		},
		// 订单状态,如果是4不可以编辑
		orderStatus: {
			type: Number
		},
		// 是否正在编辑的标识,每次只可以编辑一条数据
		editing: {
			type: Boolean,
			default: false
		},
		planId: {
			type: [String, Number]
		},
		rescue: {
			type: Boolean,
			default: false
		},
		updateStatus: {
			type: Boolean,
			default: false
		}
	},
	watch: {
		msg() {
			this.initData();
		}
	},
	created() {
		this.initData();
	},
	computed: {
		...mapState('user', ['userinfo']),
		disabled() {
			if (this.status === 4 || !this.isEdit) {
				return true;
			} else {
				return false;
			}
		}
	},
	data() {
		return {
			disposeImgUrl: [],
			isEdit: false, // 是否整条记录在编辑中
			form: {
				checkContentName: ''
			},
			planOrderStatus: ''
			// isEditDes:false// ,描述是否在编辑中
		};
	},
	methods: {
		initData() {
			let msg = JSON.parse(JSON.stringify(this.msg));
			delete msg.malfunctionRecordVO;
			this.form = msg;
			this.form.checkTypeName = this.form.partNames.split('&amp;&amp;');
			let arr = [];
			for (let i = 0; i < this.form.disposeImgUrl.length; i++) {
				this.form.disposeImgUrl[i];
				arr.push(this.form.disposeImgUrl[i].url);
			}
			this.disposeImgUrl = arr;
			console.log('this.form ', this.planId, this.form);
		},
		changeImg(list) {
			this.disposeImgUrl = list;
		},
		// 删除记录
		async handleDel() {
			// if (!this.isPlanStatus) {
			// 	uni.showToast({
			// 		title: '请先签到后再操作',
			// 		icon: 'none'
			// 	});
			// 	return;
			// }
			// await this.getDetail();
			uni.showModal({
				title: '',
				content: '确认删除本条维修记录?',
				confirmText: '确定',
				confirmColor: '#0091ff',
				cancelText: '取消',
				cancelColor: '#ccc',
				success: res => {
					if (res.confirm) {
						del({ ids: this.msg.id }).then(res => {
							if (res) {
								uni.showToast({
									title: '删除成功',
									icon: 'none'
								});
								this.$emit('update', { type: 'del' });
							}
						});
					}
				}
			});
			// if (this.planOrderStatus === 4) {
			// 	console.log('完成');
			// 	// return
			// 	this.$emit('hadDone');
			// 	return;
			// } else {

			// }
		},
		handleEdit() {
			// if (!this.isPlanStatus) {
			// 	uni.showToast({
			// 		title: '请先签到后再操作',
			// 		icon: 'none'
			// 	});
			// 	return;
			// }
			// 如果有正在编辑的数据不可以点击
			if (this.editing) {
				uni.showToast({
					title: '尚有未保存的记录',
					icon: 'none'
				});
			} else {
				this.isEdit = !this.isEdit;
				this.$emit('changeEditStatus', { isEdit: this.isEdit });
			}
		},
		// 更新内容
		async handleUpdate() {
			// await this.getDetail();
			// console.log(this.planOrderStatus, '保存的时候获取任务状态');
			const { disposeDesc } = this.form;
			if (disposeDesc === '' && this.disposeImgUrl.length === 0) {
				uni.showToast({
					title: '图片为必填项',
					icon: 'none'
				});
			} else {
				uni.showLoading({
					title: '保存中',
					mask: true
				});
				let imgs = this.disposeImgUrl;
				let arr = [];
				for (let i = 0; i < imgs.length; i++) {
					arr.push({
						url: imgs[i],
						type: 'image'
					});
				}
				this.form.disposeImgUrl = arr;
				this.form.planId = this.planId;
				const all = [this.handleDes(this.form, this.msg), update({ ...this.form, userId: this.userinfo.user_id })];
				Promise.all(all).then(res => {
					console.log(res, 'all的值');
					if (res) {
						this.isEdit = !this.isEdit;
						setTimeout(() => {
							uni.showToast({
								title: '保存成功',
								icon: 'none'
							});
						}, 200);
						this.$emit('update', { isEdit: this.isEdit, type: 'update' });
					}
				});
			}

			// if (this.planOrderStatus === 4) {
			// 	// uni.showToast({
			// 	// 	title:'订单已经完成',
			// 	// 	icon:'none'
			// 	// })
			// 	console.log('完成');

			// 	this.$emit('hadDone');
			// 	// return;
			// } else {

			// }
		},
		handleDes(res, olddata) {
			return new Promise(resolve => {
				let result = '';
				let imgUrl = this.disposeImgUrl || [];
				let oimgUrl = [];
				for (let i = 0; i < olddata.disposeImgUrl.length; i++) {
					olddata.disposeImgUrl[i];
					oimgUrl.push(olddata.disposeImgUrl[i].url);
				}
				let recordHistory = res.disposeDesc || '';
				let orecordHistory = olddata.disposeDesc || '';
				if (JSON.stringify(imgUrl) != JSON.stringify(oimgUrl)) {
					if (imgUrl.length == oimgUrl.length) {
						result = result + '更新了照片';
					} else {
						if (imgUrl.length > oimgUrl.length) {
							result = result + '上传了' + (imgUrl.length - oimgUrl.length) + '张图片';
						} else {
							result = result + '删除了' + (oimgUrl.length - imgUrl.length) + '张图片';
						}
					}
				}
				if (recordHistory != orecordHistory) {
					result = result + (result.length > 0 ? '，' : '');
					result = result + (orecordHistory ? '更新了描述' : '添加了描述');
				}
				if (!result) {
					resolve();
				}

				const params = {
					planId: this.planId,
					userId: this.userinfo.user_id,
					checkHistoryId: this.form.id,
					recordLog: result,
					recordDataValue: this.form
				};
				console.log('params', params);
				editCHeckRecord(params).then(res => {
					resolve(res);
				});
			});
		},
		getDetail() {
			return new Promise(resolve => {
				rescueDetail({ planId: this.planId }).then(res => {
					if (res) {
						this.planOrderStatus = res.data.status;
						resolve();
					}
				});
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.repari_record {
	.title {
		font-size: 32rpx;
		color: #333;
		font-weight: 500;
		// padding-bottom: 22rpx;
		padding-left: 20rpx;
	}

	.length {
		text-align: right;
		padding-bottom: 20rpx;
		color: #ccc;
		font-size: 24rpx;
	}

	.record_item {
		// display: flex;
		width: 100%;

		.header {
			display: flex;
			padding-bottom: 8rpx;
			padding-top: 22rpx;

			.num {
				width: 40rpx;
				height: 40rpx;
				font-size: 26rpx;
				color: #0091ff;
				background: #ddf0ff;
				border-radius: 0rpx 4rpx 4rpx 0rpx;
			}

			.name {
				display: flex;
				margin-left: 16rpx;
				width: 474rpx;
				flex-wrap: wrap;
			}

			.handle {
				width: 156rpx;
				display: flex;
				height: 100%;

				.handle_item {
					display: flex;
					justify-content: flex-end;
					width: 100%;
					padding-top: 2rpx;
					box-sizing: border-box;
				}

				image {
					width: 32rpx;
					height: 32rpx;
					// margin-top: 2rpx;
				}

				.editBtn {
					border-right: 2rpx solid #e9e9e9;
					justify-content: center;
					padding-right: 30rpx;
				}

				.delBtn {
					padding-left: 20rpx;
				}

				view {
					display: flex;
					flex: 1;
					justify-content: flex-end;
				}

				.saveBtn {
					color: #0091ff;
					width: 100%;
					display: flex;
					align-items: center;
					font-size: 24rpx;

					text {
						margin-left: 4rpx;
					}
				}
			}
		}

		.content {
			// margin-left: 56rpx;
			padding-left: 56rpx;
			padding-bottom: 32rpx;
			// border-bottom: 1;
			border-bottom: 2rpx solid #eeeeee;

			.type {
				font-size: 24rpx;
				color: #666;
				// margin-top: 8rpx;
			}

			.imgBox {
				margin: 20rpx 0;
			}

			.des {
				view:nth-child(1) {
					color: #999;
					font-size: 24rpx;
					margin-bottom: 8rpx;
				}
			}

			.member {
				// margin-top: 20rpx;
				color: #999;
				font-size: 24rpx;
				display: flex;
				align-items: center;
				margin-bottom: 6rpx;

				image {
					width: 24rpx;
					height: 24rpx;
					margin-right: 10rpx;
				}
			}

			.time {
				margin-left: 34rpx;
				color: #999;
				font-size: 24rpx;
			}
		}
	}
}
</style>
